<template>
    <div ref="chart" style="width: 100%; height:36%;margin-top:-2vh"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'jidiguimo',
    data() {
        return {
            myChart: null,
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['养殖规模（亩）', '预期产量（吨）'],
                    textStyle: {
                        color: '#2FFFF3' // 图例字体颜色
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['金坛', '宣城', '城电', '竖新', '金山', '奉贤'], // X轴的标签
                        axisLabel: {
                            interval: 0, // 显示所有标签
                            rotate: 0,   // 标签旋转角度，避免重叠
                            textStyle: {
                                color: '#2FFFF3' // 图例字体颜色
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '养殖规模（亩）',
                        min: 0,
                        position: 'left',
                        axisLabel: {
                            textStyle: {
                                color: '#2FFFF3' // Y轴坐标数值颜色
                            }
                        },
                        nameTextStyle: {
                            color: '#2FFFF3', // 左侧 Y轴标题颜色
                            fontSize: 12 // 左侧 Y轴标题字体大小
                        }
                    },
                    {
                        type: 'value',
                        name: '预期产量（吨）',
                        min: 0,
                        position: 'right',
                        axisLabel: {
                            textStyle: {
                                color: '#2FFFF3' // 右侧 Y轴坐标数值颜色
                            }
                        },
                        nameTextStyle: {
                            color: '#2FFFF3', // 右侧 Y轴标题颜色
                            fontSize: 12 // 右侧 Y轴标题字体大小
                        }
                    }
                ],
                series: [
                    {
                        name: '养殖规模（亩）',
                        type: 'bar',
                        data: [1500, 1600, 3000, 1800, 1900, 2000], // 养殖规模数据
                        emphasis: {
                            focus: 'series'
                        },
                        yAxisIndex: 0, // 使用第一个 Y 轴
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#02E7EA' },  // 渐变起始色
                                { offset: 1, color: '#F2C226' }   // 渐变结束色
                            ])
                        }
             
                    },
                    {
                        name: '预期产量（吨）',
                        type: 'bar',
                        data: [100, 150, 400, 200, 350, 300], // 预期产量数据
                        emphasis: {
                            focus: 'series'
                        },
                        
                        yAxisIndex: 1, // 使用第二个 Y 轴
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#28B1D1' },  // 渐变起始色
                                { offset: 1, color: '#F2C226' }   // 渐变结束色
                            ])
                        },
        

                    }
                ]
            }

        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.myChart = echarts.init(this.$refs.chart);
            this.myChart.setOption(this.option);
        }
    }
};
</script>

<style scoped>
/* 这里可以添加你的样式 */
</style>